import React from 'react';
import { Form, Icon, Input, Button, Checkbox } from 'antd';
import { Link } from 'react-router-dom';

const FormItem = Form.Item;
import styles from './index.module.less';

class LoginForm extends React.Component {
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <React.Fragment>
        <div className={styles.LoginBox}>
          <div className={styles.contentBox}>
            <h1>密码登录</h1>
            <Form onSubmit={this.handleSubmit} className="login-form">
              <FormItem>
                {getFieldDecorator('userName', {
                  rules: [{ required: true, message: '请填写你的用户名!' }],
                })(
                  <Input prefix={<i className={'iconfont icon-shouji1'}></i>} placeholder="手机号/邮箱" />
                )}
              </FormItem>
              <FormItem>
                {getFieldDecorator('password', {
                  rules: [{ required: true, message: '请填写你的用密码!' }],
                })(
                  <Input prefix={ <i className={'iconfont icon-mima'}></i>} type="password" placeholder="请输入登录密码" />
                )}
              </FormItem>
              <div className={styles.forget} ><Link to='/password-find'>忘记密码</Link></div>
              <FormItem>
                <Button type="primary" htmlType="submit" className={styles.loginFormButton} >
                  登录
                </Button>
              </FormItem>
            </Form>
            <div className={styles.free}>
              <span>还没有账号？</span>
              <Link to='/register'>立即免费注册> </Link>
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default Form.create()(LoginForm);
